<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
    <style>
        .box{
            height: 5000px;
            background-color: rgba(0, 0, 255, 0.33);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //单位时间执行一次
        var a = 1;
        function callback(){
            console.log('节流触发了');
        }
        // 高阶函数 返回值或参数也是函数
        function throttle(cb,delay){
            //高阶函数天生是个闭包 
            //cb delay 单位时间 计时 离上一次执行过去了多长时间
            //setInterval
            let isScrolling,last //定时器 上一次执行的变量
            return function(args){
                this.a=2;
                let that = this; //当前作用域，事件处理函数，this会成为事件发生的对象
                let _args = arguments // 函数执行的时 有的 call apply
                let now = +new Date(); //局部变量

                if(last && now < last + delay){ //
                    clearTimeout(isScrolling);
                    isScrolling = setTimeout(function(){//如果不执行clearTimeout,就会执行这布
                        last = now //得到了执行权
                        cb.apply(that,_args);
                        console.log('////');
                    },delay)
                }else{
                    last = now 
                    cb.apply(that,_args); //先执行一次
                    console.log('****');
                }
                // console.log('throttle');
                // console.log(args);//是Event
            }
        }
        window.addEventListener('scroll',throttle(callback,1000))
    </script>
</body>
</html>